<template>
  <div class="content">
    <div v-show = "has_history === false" class="no_recent">
      <img src="../../assets/no_history.png" class="image" alt="">
      <p style="margin-top:-5em; margin-left: 9em">还没有开始阅读文献~</p>
    </div>
    <div v-for="item in recent" :key="item.id" v-show = "has_history === true">
      <div class="card">
        <el-row>
          <span style="font-size: 15px">{{item.num}}. {{item.title}}</span>
        </el-row>
        <span style="font-size: 12px">{{item.content}}</span>
        <br>
        <span style="font-size: 12px; color:deepskyblue">浏览时间: {{item.recentdate}} </span>
        <span style="font-size: 12px; color:deepskyblue">被引用量: {{item.refertimes}}</span>
        <br>
        <hr/>
        <el-row style="height: 2em">
          <el-button type="primary" icon = "el-icon-search" style="font-size: 5px" size="mini">查看内容</el-button>
          <el-button type="success" icon = "el-icon-s-flag" style="font-size: 5px" size="mini" @click="cite(item.title, item.content)">引用</el-button>
        </el-row>
      </div>
      <br>
    </div>
    <el-dialog title="引用" :visible.sync="dialogTableVisible">
      <el-table :data="reference_text">
        <el-table-column property="type" label="引用标准" width="150"></el-table-column>
        <el-table-column property="context" label="引文内容" width="500"></el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="copy(scope.row)" size="small" :data-clipboard-text="copyValue" class="btn1">复制</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Clipboard from "_clipboard@2.0.8@clipboard";
export default {
  name: "personalrecent",
  data(){
    return{
      has_history: false,
      recent: [],
      reference_text: [
        {
          type: "GB/T 7714-2015 格式引文",
          context: ""
        }, {
          type: "MLA格式引文",
          context: ""
        },
        {
          type: "APA格式引文",
          context: ""
        }
      ],
      copyValue:"",
      centerDialogVisible: false,
      dialogTableVisible: false,
      value: [],
    }
  },
  mounted(){
    this.GetRecent();
  },
  methods:{
    getCookie(name) {
      var value = '; ' + document.cookie
      var parts = value.split('; ' + name + '=')
      if (parts.length === 2) return parts.pop().split(';').shift()
    },
    GetRecent(){
      const self = this;
      self.axios({
        method: 'post',
        url: '/get_recent/',
        data: {
          user_id: this.$store.state.username,
        },
        headers: {'X-CSRFToken':
              this.getCookie('csrftoken')
        },
      }).then(res => {
        console.log(res.data);
        const obj = res.data;
        if(obj.recentlist.length != 0){
          this.SetRecentList(obj.recentlist);
          this.has_history = true;
        }
        else{
          this.has_history = false;
        }
      }).catch(err => {
        console.log(err);
        this.SetRecentList(this.testlist);
        this.$message.error("获取浏览信息失败")
      })
    },
    SetRecentList(list){
      let i;
      this.recent.splice(0, this.recent.length);
      for(i = 0; i < list.length; i++){
        this.recent.push({id: i + 1, title: list[i].title, content: list[i].content, num: i + 1, recentdate: list[i].recentdate, refertimes: list[i].refertimes, id_backend: list[i].id});
      }

    },
    copy(row) {
      const btnCopy = new Clipboard('.btn1');
      this.copyValue = row.context;
      this.$message({
        message: '成功复制引用文本',
        type: 'success'
      });
    },
    cite(title, content) {
      let i = 0;
      for(i = 0; i < this.reference_text.length; i++){
        this.reference_text[i].context = title + content;
      }
      this.dialogTableVisible = true;
    },
  }
}
</script>

<style scoped>
.content{
  width:38em;
}
.no_recent{
   font-size: 15px;
   margin-top:4em;
   margin-left:10em;
 }
.image{
  height: 8em;
  width: 8em;
}
.card{
  position: relative;
  padding:1em;
  width: 38em;
  height: 7em;
  background: #fff;
  border-radius: 1em;
  background: rgba(255,255,255,0.1);
  box-shadow: 0 1em 2em rgba(0, 0, 0, 0.2);
  overflow: hidden;
  align-items: center;
  border-top: 2px solid rgba(255,255,255,0.5);
  border-left: 2px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(0.5em);
}
</style>